<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人资料</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


    <link rel="stylesheet" href="/forum/css/main.min.css">
    <link rel="bookmark" type="image/x-icon" href="forum/images/favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="/forum/images/favicon.ico">

    <link rel="stylesheet" href="/forum/css/thirdStylePersonal.css">
    <link rel="stylesheet" href="/forum/lib/edtiorCrop/css/font-awesome.min.css">
    <link rel="stylesheet" href="/forum/lib/edtiorCrop/css/cropper.css">
    <link rel="stylesheet" href="/forum/lib/edtiorCrop/css/webuploader.css">
    <link rel="stylesheet" href="/forum/lib/edtiorCrop/css/style.css">
    <link rel="stylesheet" href="/forum/css/edtiorCropWork1.css">
    <link rel="stylesheet" href="/forum/css/demo.css">
    <link rel="stylesheet" href="/forum/css/personalProfile.css">
    <link rel="stylesheet" href="/forum/css/mystyle.css">
    <script type="text/javascript" src="/forum/lib/jquery.min.js"></script>
</head>
<body>
<div id="body">

    <div th:replace="forum/header"></div>
    <!--*******************************-->
    <main class="main-wrapper">
        <div class="container-area">
            <div class="container-area-left">
                <div class="card-media personal-card">
                    <div class="avatar-container-80 z-center">
                        <a th:href="@{'/forum/u/'+${userId}}" th:title="${userName}" class="author-avatar" target="_blank" z-st="user_card_1_face">
                            <img th:src="${avatar}" width="80" height="80" th:title="${userName}" alt="">
                        </a>

                    </div>
                    <div class="presonal-info">
                        <a th:href="@{'/forum/u/'+${userId}}" class="author-name" target="_blank"
                           th:title="${userName}" z-st="user_card_1_name" th:text="${userName}"></a>
                    </div>
                    <div class="position-info">
                            <!--<span title="淄博 | 手工艺人">xx&nbsp;|
                              xxxx
                            </span>-->
                    </div>
                    <div class="btn-area">
                        <a href="/uploadQuestion"  class="btn-default-main card-media-mid-btn js-upload">发 帖</a><br />
                        <!--<a href="https://contributor.hellorf.com/" target="_blank" class="btn-default-secondary card-media-mid-btn mt-10">帮你的创作变现</a>-->
                    </div>

                </div>
                <div class="card-media personal-menu">

                    <ul class="menu-list">
                        <li class="menu-list-default current">
                            <i></i><a href="/setting" id="left-data-account-focus">资料与账号</a></li>
                    </ul>

                    <ul class="menu-list">
                        <li class="menu-list-default "><i></i>
                            <a href="/myQuestion" id="usercenter-menu-focus-left">我的帖子
                            </a>
                        </li>
                        <li class="menu-list-default ">
                            <i></i><a href="/myFocus">我的关注</a></li>
                        <li class="menu-list-default  ">
                            <i></i><a href="/myFavourite">我的收藏</a></li>
                    </ul>
                    <ul class="menu-list">

                        <li class="menu-list-default ">
                            <i></i><a href="/myIn" >财务中心</a></li>
                    </ul>

                </div>
                <!-- 消息列表左侧zhan广告 -->
                <!--<div class="ad-media-list">
                    <a href="https://www.hellorf.com/?utm_source=zcool&utm_medium=setting&utm_campaign=menu&utm_content=img" target="_blank"><img src="//static.zcool.cn/git_z/z/images/hellorf-ad.png" alt="海洛品牌广告" /></a>
                </div>-->
            </div>

            <div class="container-area-right">
                <div class="bg-box-radius">

                    <div class="tab-menu border-bottom">
                        <ul class="tab-box">
                            <li  class="current" ><a href="/setting">个人资料</a></li>
                            <li ><a href="/accountSafe">账号安全</a></li>
                        </ul>
                    </div>


                    <div class="datum-item-box border-bottom" id="essentialinformation">
                        <div class="text-center name-datum-box">
                            <div class="user-avatars" id="form-data-cover">
                                <div class="opacity-layer hide">修改头像</div>
                                <img th:src="${avatar}" width="120" height="120" alt="">
                            </div>
                            <div class="hover z-center">
                                <span class="text-center modify-user-name" th:text="${userName}"></span>
                                <!--<a href="https://passport.zcool.com.cn/accountSafe.do?appId=1006" class="user-name-modify" target="_blank">修改</a>-->
                            </div>
                        </div>
                        <div class="datum-title-box">
                            <!--  btn-disabled -->
                            基本信息
                        </div>
                        <div class="table-wrap">
                            <table class="datum-table" cellspacing="0">
                                <tbody>
                                <tr>
                                    <th class="padding-top-30">我的积分</th>
                                    <td class="padding-top-30" >[[${score}]]点 <a href="/rule" class="modify" target="_blank">积分规则</a></td>
                                </tr>
                                <tr>
                                    <th>手机号</th>
                                    <td>
                                        <div class="always">
                                            [[${phone}]]
                                            <a href="/accountSafe" class="modify">修改</a>
                                            <a th:if="${phoneFlag==1}" class="modify" style="color:green; ">已验证</a>
                                            <a th:if="${phoneFlag==0}" href="/accountSafe" class="modify" style="color:red; ">未验证</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>真实姓名</th>
                                    <td>
                                        <div class="always" th:if="${#strings.isEmpty(user?.real_name)}" >
                                            <span class="permission-prompt" style="margin-left: 0px;">未设置</span>
                                            <a href="/accountSafe" class="modify">上传身份证</a>
                                        </div>
                                        <div class="always" th:if="${not #strings.isEmpty(user?.real_name)}" >
                                            [[${user.real_name}]]
                                            <a href="/accountSafe" class="modify">修改</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>身份证号</th>
                                    <td>
                                        <div class="always" th:if="${#strings.isEmpty(user?.id_card)}" >
                                            <span class="permission-prompt" style="margin-left: 0px;">未设置</span>
                                            <a href="/accountSafe" class="modify">上传身份证</a>
                                        </div>
                                        <div class="always" th:if="${not #strings.isEmpty(user?.id_card)}" >
                                            [[${user?.id_card}]]
                                            <a href="/accountSafe" class="modify">修改</a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th class="padding-top-30">邮箱</th>
                                    <td class="padding-top-30">
                                        <div class="always">
                                            [[${email}]]
                                            <a href="/accountSafe" class="modify">修改</a>
                                            <a th:if="${emailFlag==1}" class="modify" style="color:green; ">已验证</a>
                                            <a th:if="${emailFlag==0}" href="/accountSafe" class="modify" style="color:red; ">未验证</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="padding-top-30"><span class="required-sign"></span>性别</th>
                                    <td class="padding-top-30">
                                        <div class="radio">
                                            <label for="radio_1" th:class="${sex=='1'}?'radio-0':'radio-1'"><input type="radio" name="radio" id="radio_1" value="1">男</label>
                                            <label for="radio_2" th:class="${sex=='0'}?'radio-0':'radio-1'"><input type="radio" name="radio" id="radio_2" value="0">女</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="padding-top-30">生日</th>
                                    <td class="padding-top-30" th:if="${#strings.isEmpty(user?.birthday)}">
                                        <div class="always">
                                            <span class="permission-prompt" style="margin-left: 0px;">未设置</span>
                                            <a href="/accountSafe" class="modify">上传身份证</a>
                                        </div>
                                    </td>
                                    <td class="padding-top-30" th:if="${not #strings.isEmpty(user?.birthday)}"  th:text="${user?.birthday}"></td>
                                </tr>
                                <tr>
                                    <th>家乡</th>
                                    <td>
                                        <section>
                                            <input type="hidden" id="homeProvinceValue" th:value="${homeProvinceValue}">
                                            <input type="hidden" id="homeCityValue" th:value="${homeCityValue}">
                                            <input type="hidden" id="homeDistrictValue" th:value="${homeDistrictValue}">

                                            <div class="col" style="float:left;">
                                                <div class="wrapper">
                                                    <select id="homeCity" onChange="initCity2('home')" class="dropdown" tabindex="7" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value=''>--请选择--</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col" style="float:left;margin-left: 5px;display: none;" id="homeCity2Div">
                                                <div class="wrapper">
                                                    <select id="homeCity2" onChange="initCity3('home')" class="dropdown" tabindex="7" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value=''>--请选择--</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col" style="float:left;margin-left: 5px;display: none;" id="homeCity3Div">
                                                <div class="wrapper">
                                                    <select id="homeCity3" onChange="city3Change('home')"  class="dropdown" tabindex="7" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value=''>--请选择--</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </section>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span class="required-sign"></span>现居</th>
                                    <td>
                                        <section>

                                            <input type="hidden" id="nowProvinceValue" th:value="${nowProvinceValue}">
                                            <input type="hidden" id="nowCityValue" th:value="${nowCityValue}">
                                            <input type="hidden" id="nowDistrictValue" th:value="${nowDistrictValue}">

                                            <div class="col" style="float:left;">
                                                <div class="wrapper">
                                                    <select id="nowCity" onChange="initCity2('now')" class="dropdown" tabindex="8" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value=''>--请选择--</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col" style="float:left;margin-left: 5px;display: none;" id="nowCity2Div">
                                                <div class="wrapper">
                                                    <select id="nowCity2" onChange="initCity3('now')" class="dropdown" tabindex="7" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value=''>--请选择--</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col" style="float:left;margin-left: 5px;display: none;" id="nowCity3Div">
                                                <div class="wrapper">
                                                    <select id="nowCity3" onChange="city3Change('now')"  class="dropdown" tabindex="7" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value=''>--请选择--</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </section>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span class="required-sign"></span>职业</th>
                                    <td>
                                        <section>
                                            <div class="col job-select" style="float:left;">
                                                <div class="wrapper">
                                                    <select class="dropdown" tabindex="9" data-settings='{"wrapperClass":"flat"}'>


                                                        <option data-id="1" th:selected="${user?.job=='1'}">学生</option>

                                                        <option data-id="2" th:selected="${user?.job=='2'}">设计爱好者</option>

                                                        <option data-id="3" th:selected="${user?.job=='3'}">建筑师</option>

                                                        <option data-id="4" th:selected="${user?.job=='4'}">服装设计师</option>

                                                        <option data-id="5"  th:selected="${user?.job=='5'}">手工艺人</option>

                                                        <option data-id="6" th:selected="${user?.job=='6'}">教育工作者</option>

                                                    </select>
                                                </div>
                                            </div>
                                        </section>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="padding-top-30">注册时间</th>
                                    <td class="padding-top-30" th:text="${#dates.format(createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                </tr>

                                <tr>
                                    <th valign="top" class="brief-introduction">简介</th>
                                    <td class="padding-top-30">
                                        <div class="long-text-box">
                                            <textarea id="description" class="text-style textarea-style" onpropertychange="MaxMe(this)" oninput="MaxMe(this)">[[${description}]]</textarea>
                                        </div>
                                    </td>
                                </tr>
                                </tbody></table>
                            <input type="button" name="" value="保存" id="basic-information" class="btn-default-main btn-current-small mt-30 right">
                        </div>
                    </div>

                    <div class="datum-item-box border-bottom" id="detail">
                        <div class="datum-title-box">
                            详细信息
                        </div>
                        <div class="table-wrap">
                            <table class="datum-table left" cellspacing="0" style="    width: 100%;">
                                <tbody>

                                <tr>
                                    <th>身高</th>
                                    <td>
                                        <div class="">
                                            <input type="text" name="height" id="height" onkeyup="this.value=this.value.replace(/\D/g,'')" th:value="${user?.height}" placeholder="" class="text-style"><span class="modify">CM</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>体重</th>
                                    <td>
                                        <div class="">
                                            <input type="text" name="weight" id="weight" onkeyup="this.value=this.value.replace(/\D/g,'')" th:value="${user?.weight}" placeholder="" class="text-style"><span class="modify">KG</span>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>学历</th>
                                    <td>
                                        <section>
                                    <div class="col education" style="float:left;">
                                        <div class="wrapper">
                                            <select class="dropdown" tabindex="9" th:with="type=${@dict.getType('education')}" data-settings='{"wrapperClass":"flat"}'>
                                                <option value="">-请选择-</option>
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:selected="${dict.dictValue==user?.education}" th:data-id="${dict.dictValue}"  ></option>
                                            </select>
                                        </div>
                                    </div>
                                </section>
                                    </td>
                                </tr>




                                <tr>
                                    <th>民族</th>
                                    <td>
                                        <section>
                                            <div class="col minzhu" style="float:left;">
                                                <div class="wrapper">
                                                    <select class="dropdown" tabindex="9" th:with="type=${@dict.getType('minzu')}" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value="">-请选择-</option>
                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:selected="${dict.dictValue==user?.minzhu+''}"  th:data-id="${dict.dictValue}"  ></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </section>
                                    </td>
                                </tr>

                                <tr>
                                    <th>星座</th>

                                    <td class="padding-top-30" th:if="${#strings.isEmpty(user?.xingzuo)}">
                                        <div class="always">
                                            <span class="permission-prompt" style="margin-left: 0px;">上传身份证后自动显示</span>
                                            <a href="/accountSafe" class="modify">去上传</a>
                                        </div>
                                    </td>
                                    <td class="padding-top-30" th:if="${not #strings.isEmpty(user?.xingzuo)}"  th:text="${user?.xingzuo}"></td>

                                </tr>


                                <tr>
                                    <th>血型</th>
                                    <td>
                                        <section>
                                            <div class="col xuexing" style="float:left;">
                                                <div class="wrapper">
                                                    <select class="dropdown" tabindex="9" th:with="type=${@dict.getType('xuexing')}" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value="">-请选择-</option>
                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:selected="${dict.dictValue==user?.xuexing+''}"  th:data-id="${dict.dictValue}"  ></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </section>
                                    </td>
                                </tr>

                                <tr>
                                    <th>属相</th>

                                    <td class="padding-top-30" th:if="${#strings.isEmpty(user?.shuxiang)}">
                                        <div class="always">
                                            <span class="permission-prompt" style="margin-left: 0px;">上传身份证后自动显示</span>
                                            <a href="/accountSafe" class="modify">去上传</a>
                                        </div>
                                    </td>
                                    <td class="padding-top-30" th:if="${not #strings.isEmpty(user?.shuxiang)}"  th:text="${user?.shuxiang}"></td>

                                </tr>


                                <tr>
                                    <th>婚姻状态</th>
                                    <td>
                                        <section>
                                            <div class="col marriage" style="float:left;">
                                                <div class="wrapper">
                                                    <select class="dropdown" tabindex="9" th:with="type=${@dict.getType('marriage')}" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value="">-请选择-</option>
                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:selected="${dict.dictValue==user?.marriage+''}"  th:data-id="${dict.dictValue}"  ></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </section>
                                    </td>
                                </tr>

                                <tr>
                                    <th>有无子女</th>
                                    <td class="padding-top-30">
                                        <div class="radio">
                                            <label for="radio_children1" th:class="${user?.children==0}?'radio-0':'radio-1'"><input type="radio" name="children" id="radio_children1" value="0">无</label>
                                            <label for="radio_children2" th:class="${user?.children==1}?'radio-0':'radio-1'"><input type="radio" name="children" id="radio_children2" value="1">有</label>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>学校名称</th>
                                    <td>
                                        <div class="school-name-wrap">
                                            <div class="morktext-box">
                                                <input type="text" name="school-name" th:value="${highSchool}" th:data-id="${highSchoolId}" placeholder="请填写学校" id="school-name" class="text-style short-text-box">
                                            </div>
                                            <div class="matching-list school-name-list hide">
                                                <ul class="scrollbar">
                                                </ul>
                                                <div class="empty hide">
                                                    没有匹配学校
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>月收入</th>
                                    <td>
                                        <section>
                                            <div class="col salary" style="float:left;">
                                                <div class="wrapper">

                                                    <select class="dropdown" tabindex="9" th:with="type=${@dict.getType('salary')}" data-settings='{"wrapperClass":"flat"}'>
                                                        <option value="">-请选择-</option>
                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:selected="${dict.dictValue==user?.salary+''}"  th:data-id="${dict.dictValue}" ></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </section>
                                    </td>
                                </tr>

                                </tbody></table>
                            <input type="button" name="" style="display: inline-block" id="detail-btn" value="保存" class="btn-default-main btn-current-small mt-20 right">
                        </div>
                    </div>

                    <div class="datum-item-box border-bottom" id="contact">
                        <div class="datum-title-box">
                            联系方式
                        </div>
                        <div class="table-wrap">
                            <table class="datum-table left" cellspacing="0">
                                <tbody><tr>
                                    <th>QQ</th>
                                    <td><input type="text" name="qq-account" maxlength="20" class="text-style short-text-box" th:value="${user?.qq}" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                                        <div class="dropdown-box">
                                            <section>
                                                <div class="col">
                                                    <div class="wrapper">
                                                        <select class="dropdown" id="qq-privacy" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
                                                            <option value="0" data-id="0"  th:selected="${user?.qqPrivate==0}" >仅自己可见</option>
                                                            <option value="1" data-id="1"  th:selected="${user?.qqPrivate==1}">所有人可见</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>微信</th>
                                    <td><input type="text" name="wechat" maxlength="30" class="text-style short-text-box" th:value="${user?.wx}" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')" onafterpaste="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')">
                                        <div class="dropdown-box">
                                            <section>
                                                <div class="col">
                                                    <div class="wrapper">
                                                        <select class="dropdown" id="wechat-privacy" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
                                                            <option value="1" data-id="1"  th:selected="${user?.wxPrivate==1}">所有人可见</option>
                                                            <option value="0" data-id="0"  th:selected="${user?.wxPrivate==0}">仅自己可见</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </td>
                                </tr>
                                </tbody></table>
                            <input type="button" name="" value="保存" id="contact-way" class="btn-default-main btn-current-small right" style="margin-top: 90px;">
                        </div>
                    </div>

                    <div class="datum-item-box" id="label">
                        <div class="datum-title-box">
                            个人标签
                        </div>
                        <div class="personal-mark-box">
                            <div class="mark-input-wrap">
                                <div class="morktext-box">
                                    <input type="text" id="workmark" name="" placeholder="个人标签，不超过8个汉字/16个英文字符 " class="work-mark text-style">
                                </div>
                                <!-- <i class="count">50</i> -->
                                <input type="button" name="" disabled="" class="mark-btn disabled-color zcool-link-color" value="贴标签(5)">
                                <input type="button" name="" class="disabled-color mark-disabled hide" value="贴标签(0)">
                            </div>


                            <div class="mark-con">
                                <span class="mark" th:each="tag:${tags}" th:title="${tag}" >[[${tag}]]<i></i></span>
                            </div>
                        </div>
                    </div>

                    <div class="pop-up-normal datum-tips-pop hide">
                        <p class="tips-text tips-text-normal"></p>
                    </div>


                </div>

            </div>
        </div>
    </main>
    <!--*******************************-->
    <div th:replace="forum/footer"></div>
    <div style="display: none">
        <div id="empty_message_box" class="msg-box-null">
            <div class="msg-box-inner">
                <span class="null-images"></span>
                <span class="msg-null-tips">没有新消息</span>
            </div>
        </div>
    </div>

</div>

<!-- 登录弹窗 -->
<div class="alert-confirm hide">
    <p class="tips-text tips-alert-text"></p>
    <div class="text-center pop-btn-con">
        <input type="button" name="" class="btn-default-main pop-confirm" value="我知道了">
    </div>
    <i class="pop-close"></i>
</div>
<div class="pop-up-confirm hide">
    <p class="tips-text"></p>
    <div class="text-center pop-btn-con">
        <input type="button" name="" class="btn-default-main pop-confirm" value="确定">
        <input type="button" name="" class="btn-default-secondary pop-cancel" value="取消">
    </div>
    <i class="pop-close"></i>
</div>
<div class="toast-fail hide">
    <span class="toast-pictrue"></span>
    <div class="toast-tips-text">
        <span class="toast-first-text"></span> <br>
        <span class="toast-socend-text"></span>
    </div>
</div>
<div class="toast-success hide">
    <span class="toast-pictrue"></span>
    <div class="toast-tips-text">
        <span class="toast-first-text"></span> <br>
        <span class="toast-socend-text"></span>
    </div>
</div>

<div class="editor-portrait hide">
    <label class="cover-con" for="inputImage" title="Upload image file">
        <div class="cover">
            <div class="upload-normal-box">添加图片

                <p class="format">只支持JPG/PNG/GIF，GIF文件不能动画化，大小不超过5M<br>
                    建议尺寸为240X240</p>
            </div>
        </div>
        <div class="cover-preview">

        </div>
    </label>
    <p class="upload-headimg">上传封面<i class="edtior-crop-close"></i></p>
    <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
            href="http://browsehappy.com/">upgrade
        your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="main-edtior">
        <div class="img-container-wrapper">
            <div class="img-container">
                <div class="btn-group btn-group-add-img" id="coverPicker">
                    <input type="file" class="sr-only" id="inputImage" name="file">
                    <span class="docs-tooltip" data-toggle="tooltip" title="">
                     <span class="fa fa-upload">
                        <img id="image" th:src="${avatar}" alt="Picture"></span>
                    </span>
                </div>
                <div class="img-preview-wrap">
                    <div class="card-box">
                        <div class="card-img img-preview preview-lg">
                        </div>
                        <div class="card-info">
                            <p class="card-info-title">
                                <a href="javascript:;" class="data-title title-content"></a>
                            </p>
                            <p class="data-type-cate-subcate card-info-type"></p>
                            <p class="card-info-item">
                                <span class="data-viewCount statistics-view" title=""></span>
                                <span class="data-commentCount statistics-comment" title=""></span>
                                <span class="data-recommendCount statistics-tuijian" title=""></span>
                            </p>
                        </div>
                        <div class="card-item">
                            <a class="data-member" href="javascript:;" title="" target="_blank">
                                <img class="data-member-avatar" src="" width="30" height="30">
                            </a>
                            <span class="data-publishTime time" title=""></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rotate-area">
                <div class="docs-buttons img-function-icon">
                    <div class="btn-group btn-rotater">
                        <button type="button" class="" data-method="rotate" data-option="90" title="">
                              <span class="docs-tooltip" data-toggle="tooltip" title="">
                              </span>
                        </button>
                    </div>
                    <div class="btn-group btn-zoomout">
                        <button type="button" class="" data-method="big" data-option="0.1" title="">
                              <span class="docs-tooltip" data-toggle="tooltip" title="">
                              </span>
                        </button>
                    </div>
                    <div class="btn-group btn-zoomin">
                        <button type="button" class="" data-method="small" data-option="-0.1" title="">
                              <span class="docs-tooltip" data-toggle="tooltip" title="">
                              </span>
                        </button>
                    </div>
                    <div class="btn-group btn-reset">
                        <label class="" for="inputImage" title="">
                            <input type="file" class="res-only" id="inputImage" name="file" accept="image/*">
                            <span class="docs-tooltip zcool-link-color" data-toggle="tooltip" title="">重新上传</span>
                        </label>
                    </div>

                    <div class="modal" id="getCroppedCanvasModal" aria-hidden="true"
                         aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                        <div class="modal-body"></div>
                        <div class="">
                            <button type="button" class="btn" data-dismiss="modal">Close</button>
                            <a class="btn" id="download" href="javascript:;"
                               download="cropped.jpg">Download</a>
                        </div>
                    </div>

                </div>
                <div class="cover-card-view">
                    封面预览
                </div>
            </div>
        </div>

    </div>
    <div class="docs-buttons btn-submit border-top">
        <div class="btn-group btn-group-crop text-center">
            <input type="button" class="btn-default-main pop-confirm" data-method="getCroppedCanvas" value="确定">
            <button type="button" class="btn-default-secondary pop-cancel">取消</button>
        </div>
    </div>
</div>
<div class="shade hide"></div>

<script src="/forum/lib/mCustomScrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="/forum/js/common.js"></script>
<script type="text/javascript" src="/forum/lib/jquery.easydropdown-version0.1.js"></script>

<script src="/forum/lib/edtiorCrop/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/forum/lib/edtiorCrop/js/cropper.js"></script>
<script  th:src="@{/ruoyi/js/ry-ui.js}"></script>
<script type="text/javascript" src="/forum/lib/edtiorCrop/js/uploadWorkCrop1.js"></script>
<script type="text/javascript" src="/forum/js/personalProfile.js"></script>
<script th:inline="javascript"> var ctx = [[@{/}]];</script>
<script>
    $(function () {

        initCity('home');//故乡

        initCity('now');//现居地
    })
    function city3Change(type){
        var countryId=$("#"+type+"City3").val();
        $("#"+type+"DistrictValue").val(countryId);
    }
    function initCity3(type){
        var cityId=$("#"+type+"City2").val();
        $("#"+type+"CityValue").val(cityId);
        var selectedCountry=$("#"+type+"DistrictValue").val();
        if($.common.isEmpty(cityId)){
            $("#"+type+"City3Div").hide();
            return;
        }
        $.ajax({
            type: "post",
            url: ctx+"plugs/getPositionCountryByCityId?cityId="+cityId+"&selectedCountry="+selectedCountry,
            data: null,
            xhrFields: {
                withCredentials: true
            },
            dataType: "json",
            success: function(data) {
                $("#"+type+"City3Div").show();
                $("#"+type+"City3").easyDropDown("destroy"); // 必不可少,因为前端样式已经变成ul和li了，所以必须先销毁一遍.
                data=data.PositionList;
                $("#"+type+"City3").empty();
                var html="<option value=''>--请选择--</option>";
                $.each(data,function(i,v){
                    if(v.selected=="selected"){
                        html+="<option value='"+v.id+"' selected='selected' data-id='"+v.id+"' >"+v.name+"</option>";
                    }else{
                        html+="<option value='"+v.id+"' data-id='"+v.id+"' >"+v.name+"</option>";
                    }
                });
                $("#"+type+"City3").append(html);
                $("#"+type+"City3").easyDropDown({  wrapperClass: 'flat'});
            }
        })
    }

    function initCity2(type){

        var provinceId=$("#"+type+"City").val();
        $("#"+type+"ProvinceValue").val(provinceId);
        var selectedCity=$("#"+type+"CityValue").val();
        if($.common.isEmpty(provinceId)){
            $("#"+type+"City2Div").hide();
            $("#"+type+"City3Div").hide();
            return;
        }
        $.ajax({
            type: "post",
            url: ctx+"plugs/getPositionCityByProvinceId?provinceId="+provinceId+"&selectedCity="+selectedCity,
            data: null,
            xhrFields: {
                withCredentials: true
            },
            dataType: "json",
            success: function(data) {
                $("#"+type+"City3Div").hide();
                $("#"+type+"City2Div").show();
                $("#"+type+"City2").easyDropDown("destroy"); // 必不可少,因为前端样式已经变成ul和li了，所以必须先销毁一遍.
                data=data.CityList;
                $("#"+type+"City2").empty();
                var html="<option value=''>--请选择--</option>";
                $.each(data,function(i,v){
                    if(v.selected=="selected"){
                        html+="<option value='"+v.id+"' selected='selected' data-id='"+v.id+"' >"+v.name+"</option>";
                    }else{
                        html+="<option value='"+v.id+"' data-id='"+v.id+"' >"+v.name+"</option>";
                    }
                });
                $("#"+type+"City2").append(html);
                $("#"+type+"City2").easyDropDown({  wrapperClass: 'flat'});
                if($.common.isNotEmpty(selectedCity)){
                    initCity3(type);
                }
            }
        })
    }
    function initCity(type){

        var selectedProvince=$("#"+type+"ProvinceValue").val();
        $.ajax({
            type: "post",
            url: ctx+"plugs/getPositionProvinceList?selectedProvince="+selectedProvince,
            data: null,
            xhrFields: {
                withCredentials: true
            },
            dataType: "json",
            success: function(data) {
                $("#"+type+"City").easyDropDown("destroy"); // 必不可少,因为前端样式已经变成ul和li了，所以必须先销毁一遍.
                   data=data.ProvinceList;
                   var html="";
                   $.each(data,function(i,v){
                       if(v.selected=="selected"){
                           html+="<option value='"+v.id+"' selected='selected' data-id='"+v.id+"' >"+v.name+"</option>";
                       }else{
                          html+="<option value='"+v.id+"' data-id='"+v.id+"' >"+v.name+"</option>";
                       }
                   });
                $("#"+type+"City").append(html);
                $("#"+type+"City").easyDropDown({  wrapperClass: 'flat'});
                if($.common.isNotEmpty(selectedProvince)){
                    initCity2(type);
                }
            }
        })
    }
</script>
</body>
</html>
